188651494 pixi js integration #1697
Conversation
…rdinates with pixi js
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## main #1697 +/- ##
==========================================
+ Coverage 68.07% 69.52% +1.44%
==========================================
Files 607 607
Lines 30810 30823 +13
Branches 8509 8451 -58
==========================================
+ Hits 20975 21430 +455
+ Misses 9227 8795 -432
+ Partials 608 598 -10
Flags with carried forward coverage won't be shown. Click here to find out more. ☔ View full report in Codecov by Sentry. |
codap-v3
|
||||||||||||||||||||||||||||
| Project |
codap-v3
|
| Branch Review |
188651494-pixiJS-integration
|
| Run status |
|
| Run duration | 05m 09s |
| Commit |
|
| Committer | nstclair-cc |
| View all properties for this run ↗︎ | |
| Test results | |
|---|---|
Failures
|
0
|
Flaky
|
0
|
Pending
|
18
|
Skipped
|
0
|
Passing
|
18
|
| View all changes introduced in this branch ↗︎ | |
- Specified the cypress/e2e/pixi-interaction/**/*.ts pattern for the Cypress step. - Removed: Save Webpack Cache step. - Removed: Upload coverage to Codecov step. - Updated: spec: property to accept the pattern cypress/e2e/smoke/**/*.ts, allowing multiple tests in the smoke folder.
| # set repository so we don't have to check out all of the code | ||
| GH_REPO: ${{github.repository}} | ||
|
|
||
| cypress: |
There was a problem hiding this comment.
This cypress section, a GitHub Actions "job", needs to be indented to the same spot as re_run:.
I found that by looking for the log of running this workflow: https://github.com/concord-consortium/codap/actions/runs/12474798288
Since the workflow isn't running yet it is hard to know if there are other things broken.
| @@ -0,0 +1,55 @@ | |||
| name: Regression Label | |||
There was a problem hiding this comment.
This should be renamed to something like "Graph Pixi Tests".
That will make it easier to tell if it is working or not. It currently has the same name as another workflow.
Below are the results right now. This workflow is the one with the on: push below it. It doesn't have any running jobs because of the syntax error (see comment below).
PT-#188651494
Summary
This PR introduces improvements and proof-of-concept tests using PixiJS for graph and map interactions in CODAP v3. We’ve added multiple checks, tools, and tests to enhance our ability to debug and validate graphical behaviors.
New Features
1. Point Selection and Coloring in Graphs and Maps
• Added functionality to validate coloring of points (e.g., selection, legend plots).
• Example proof-of-concept tests now check:
• Colors of points are as expected.
• Colors are valid hex codes (e.g., #4682B4, #E6805B).
2. Counting Points in Graphs and Maps
• Implemented logic to count the number of points in a graph dynamically.
• Validates expected point counts in various scenarios, such as parent-child grouping and attribute selections.
3. Checking Position of Points in Graphs and Maps
• Implemented logic to check the (x, y) position of points in a graph or map.
• Validates expected position in various scenarios, such as undo redo.
4. Debugger Statement
• Introduced a new debugger tool to make it easier to inspect PixiJS point metadata.
• In the browser Console, you can call
pixiPointsMapto access the array of Pixi points.Tests Added
1. Proof-of-Concept Tests
Included tests for new functionality, such as:
• Point selection validation (with colors).
• Attribute grouping with dynamic point counting.
• Graph updates after selection, hierarchy, and legend interactions.
• Point (x, y) position.
2. PixiJS Checks
Multiple checks added that check:
• Colors of points are accurate and match expectations.
• Graphs update correctly after selections and attribute changes.
• Graph legends and plots dynamically adapt.
• Added logs for pixiPoints, textures, and fill values for better visibility (this is because we don't have visibility with the canvas element; logs help the developer get feedback on the issue when tests fail)
How to Use the Debugger
1. Open the graph or map component.
2. In the Console, call
pixiPointsMapafter enabling the debugger with Key:debugand Value:pixiPoints.3. Inspect
pixiPointsMapto view point metadata (e.g., texture, position).Next Steps
• These changes lay the groundwork for:
• Extending point-coloring logic for additional use cases.
• Enhancing legend interactions for categorical attributes.
Proof of Concept in Action
Here’s an example of what’s now possible:
• Validate graph points are colored correctly.
• Validate graph points are in correct position.
• Verify dynamic updates when selecting attributes or grouping data.
• Debug PixiJS behavior directly in the Console with a single statement.